<template>
  <div class="l_home">
    <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse?'64px':'200px'">
            <el-menu 
            background-color="#F6DD0D" 
            text-color="#333" 
            active-text-color="#1890ff" 
            unique-opened 
            :collapse="isCollapse" 
            :collapse-transition="false" 
            router 
            default-active="activePath">
            <img src="../assets/images/108x108.png" alt="" class="l_home-image">
                <el-menu-item index="/home">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <!-- <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>管理员用户管理</span>
                    </template>
                    二级
                    <el-menu-item index="1-2" @click="saveNavState('/1-2')">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>客户管理</span>
                        </template>
                    </el-menu-item>
                </el-submenu> -->
                <!-- 一级 -->
                <el-menu-item index="personnel">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>管理员用户管理</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="configure">
                    <template slot="title">
                        <i class="el-icon-s-claim"></i>
                        <span>支付套餐配置</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="manage">
                    <i class="el-icon-info"></i>
                    <span slot="title">猫屋申请管理</span>
                </el-menu-item>
                <el-menu-item index="govern">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="organize">
                    <i class="el-icon-s-marketing"></i>
                    <span slot="title">喵喵圈管理</span>
                </el-menu-item>
                <el-menu-item index="upload">
                    <i class="el-icon-upload"></i>
                    <span slot="title">上传</span>
                </el-menu-item>
                <el-menu-item index="custom">
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">自定义表单</span>
                </el-menu-item>
                 <el-menu-item index="news">
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">新闻</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <!-- 右侧主体 -->
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="l_home-container">
                    <div class="l_home-icon" @click="toggleCollapse">
                        <i class="el-icon-s-fold" v-if="!isCollapse"></i>
                        <i class="el-icon-s-unfold" v-else></i>
                    </div>
                    <!-- <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>管理员用户管理</el-breadcrumb-item>
                        <el-breadcrumb-item>支付套餐配置</el-breadcrumb-item>
                        <el-breadcrumb-item>猫屋申请管理</el-breadcrumb-item>
                        <el-breadcrumb-item>喵喵圈管理</el-breadcrumb-item>
                        <el-breadcrumb-item>上传</el-breadcrumb-item>
                        <el-breadcrumb-item>自定义表单</el-breadcrumb-item>
                    </el-breadcrumb> -->
                </div>
                <el-dropdown trigger="click" @command="handleCommand">
                    <!-- <el-dropdown-item command="b">退出登录</el-dropdown-item> -->
                    <span class="el-dropdown-link">
                        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item command="a">修改密码</el-dropdown-item> -->
                        <el-dropdown-item command="b">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <!-- 主体 -->
            <el-main><router-view></router-view></el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
    name: 'home',
    data() {
        return {
            // 侧边栏
            menulist: [],
            // 侧边栏是否折叠
            isCollapse: false,
            // 激活链接地址
            activePath: ''

        }
    },
    created() {
        // this.getMenuList();
        this.activePath = window.localStorage.getItem('activePath');
    },
    methods: {
        // 退出登录 修改密码
        handleCommand(command) {
            if (command !== "a") {
                window.sessionStorage.clear();
                this.$router.push('/login');
            }

        },
        // 侧边栏
        async getMenuList() {
            // const { data:res } = await this.$http.get("menus");
            // if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
            // this.menulist = res.data
            // console.log(res)
        },
        // 侧边栏展开收起
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
        },
        saveNavState(activePath) {
            window.localStorage.setItem('activePath',activePath);
            this.activePath = activePath
        },
    }
    
}
</script>

<style scoped>
.l_home{height: 100%;min-width: 992px;}
.el-container{height: 100%;}
.l_home-icon{margin-right: 20px;cursor: pointer;}
.el-header{width: 100%; position: relative; display: flex; justify-content: space-between;align-items: center;}
.l_home-container{display: flex;align-items: center;}
.el-dropdown{cursor: pointer;}
.el-aside{background-color: #F6DD0D;}
.el-menu{height: 100%;border-right: none;}

.el-main{background-color: #fafafa;}

.l_home-image{width: 50px;position: relative;top: 10px;left: 50%;transform: translate(-50%,0);margin-bottom: 10px;}
</style>